<style type="text/css" scoped="scoped">
	a{
		text-decoration: none;
	}
	.banande{
		position: relative;
		width: 100%;
		height: 720px;
		overflow: hidden;
		min-width: 1280px;
	}
	.one{
		width: 600px;
		height: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: flex;
		flex-direction: column;
        align-items: center;
	}
	.banande-but{
		width: 240px;
		height: 80px;
		background-color: #00CDA8;
		color: #ffffff;
		text-align: center;
		line-height: 80px;
		font-size: 30px;
		margin-top: 80px;
		border-radius: 4px;
	}
	.content{
		text-align: center;
		margin: 30px 0;
	}
	.content-1{
		width: 100%;
		min-width: 1280px;
		background-color: #2D3A40;
	}
	.content-1 .li{
		position: relative;
		height: 640px;
		overflow: hidden;
	}
	.content-1 .li-c{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
	}
	.content-1 .li-s img{
		display: block;
		margin-left: 20%;
	}
	.content-1 .li-s{
		position: absolute;
		bottom: 50%;
		right: 50%;
		transform: translateY(50%);
	}
	.charge{
		width: 1500px;
		margin: 0 auto;
	}
	.charge .img{
		display: flex;
		justify-content: space-between;
	}
	h3{
		font-size: 50px;
		font-weight: 500;
	}
	.list{
		background-color: #37444A;
	}
	.list>h3{
		text-align: center;
		color: #ffffff;
	}
	.start_s{
		width: 1200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 100px;
	}
</style>
<template>
  <div>
	  <div class="banande">
		  <img src="http://img.chufaba.me/357b8493cac1ea0254674b173e8f201d.jpg" width="100%" alt="">
		  <div class="one">
			  <img src="http://img.chufaba.me/509a6a9c222d98d164aa3d852a426035.png" alt="" width="600">
			  <a href="" class="banande-but">{{one}}</a>
		  </div>
	  </div>
	  <div class="content">
		  <img src="http://img.chufaba.me/7109579202a15331a33d1ac14fa556e3.png" alt="" class="content-img">
	  </div>
	  
	  <div class="content-1">
		  <div class="li">
			  <img src="http://img.chufaba.me/3431755e6c2ecc4b9a3411f21d02c63d.jpg" alt="">
			  <div class="li-c">
				  <img src="http://img.chufaba.me/7a0e86ab32f551a69d8ff24306a21a78.png" alt="">
			  </div>
		  </div>
		  <div class="li">
			  <img src="http://img.chufaba.me/3e8bcc2b1d9789eafb60da864520d207.jpg" alt="">
			  <div class="li-c">
				  <img src="http://img.chufaba.me/033cb765373af30128119dbb913f396a.png" alt="">
			  </div>
		  </div>
		  <div class="li">
			  <img src="http://img.chufaba.me/5aaf3d2ade2d2258aeb2254b3324bfe2.jpg" alt="">
			  <div class="li-s">
				  <img src="http://img.chufaba.me/56a02a0ce4705a192c86c9a3185eeb26.png" alt="">
			  </div>
		  </div>
	  </div>
	  
	  
	  <div class="charge">
		  <h3>{{chargepp}}</h3>
		  <div class="img">
			  <img src="https://static.zhinanmao.com/images/cfb/pricing1.png" alt="">
			  <img src="https://static.zhinanmao.com/images/cfb/pricing1.png" alt="">
			  <img src="https://static.zhinanmao.com/images/cfb/pricing3.png" alt="">
			  <img src="https://static.zhinanmao.com/images/cfb/pricing4.png" alt="">
		  </div>
		  <h3>{{one_d}}</h3>
		  <img src="http://img.chufaba.me/816d9f57bd847fabf6f147f543aa4333.png" alt="">
	  </div>
	  
	  
	  <div class="list">
		  <h3>{{one_s}}</h3>
		  <div class="list_s">
			  
		  </div>
	  </div>
	  
	  
	  <div class="start">
		  <div class="start_s">
			  <img src="http://img.chufaba.me/35487993164905d28663c265c833e39e.png" alt="">
			  <a href="" class="banande-but">{{one}}</a>
		  </div>
	  </div>
	  
	  
  </div>
</template>
<script>
    export default{
		data(){
			return{
				one:"开始定制",
				one_d:"服务流程",
				one_s:"客户案例",
				chargepp:"如何收费？"
			}
		},
	}
</script>
<!-- 
<script>
	import imgsss from '../components/imgsss.vue' 
	export default{
		name:"App",
		components:{imgsss}
	}
</script> -->
